<template>
  <el-dialog title="编辑项目" width="900px" :close-on-click-modal="false" @open="initData"  v-model="props.infoDialog" @close="cancelForm" v-dialogDrag>
    <el-form :model="formData.form" label-width="120px">
      <el-form-item label="项目管理方式">
        <el-input v-model="formData.form.model" />
      </el-form-item>
      <!-- 新建修改项目集-->
      <div v-if="formData.form.parent==0">
        <el-form-item label="项目所在集">
          <el-input v-model="formData.form.parent" disabled />
        </el-form-item>
      </div>
      <!-- 新建修改项目内容-->
      <div v-else>
        <el-form-item label="所属项目集">
          <el-select v-model="formData.form.parent" clearable placeholder="请选择" disabled >
            <el-option
              v-for="item in formData.setOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="关联产品">
          <el-select v-model="formData.form.product" clearable placeholder="请选择" :disabled="formData.form.id>0" >
            <el-option
              v-for="item in formData.produstOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </div>
      <el-form-item label="项目名称">
        <el-input v-model="formData.form.name" />
      </el-form-item>
      <el-form-item label="项目代号">
        <el-input v-model="formData.form.code" />
      </el-form-item>
      <el-form-item label="迭代">
        <el-switch v-model="formData.form.division"
                   class="ml-2"
                   inline-prompt
                   active-value="1"
                   inactive-value="0"
                   style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                   active-text="启用迭代"
                   inactive-text="关闭迭代"/>
      </el-form-item>
      <el-form-item label="项目类型">
        <el-radio-group v-model="formData.form.hasProduct">
          <el-radio :label=1 >产品型项目</el-radio>
          <el-radio :label=0 >项目型项目</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="负责人">
        <el-select v-model="formData.form.pm" clearable placeholder="请选择">
          <el-option
            v-for="item in formData.userOptions"
            :key="item.id"
            :label="item.nickname"
            :value="item.account"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="预算">
        <el-col :span="4">
          <el-input v-model="formData.form.budget" />
        </el-col>
        <el-col :span="4">
          <el-select v-model="formData.form.budgetUnit" placeholder="请选择币种">
            <el-option label="人民币" value="CNY" />
            <el-option label="美元" value="USD" />
          </el-select>
        </el-col>
      </el-form-item>

      <el-form-item label="计划起止时间">
        <el-col :span="11">
          <el-date-picker
            v-model="formData.form.begin"
            type="date"
            placeholder="计划开始时间"
            style="width: 100%"
          />
        </el-col>
        <el-col :span="2" class="text-center">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
          <el-date-picker
            v-model="formData.form.end"
            type="date"
            placeholder="计划结束时间"
            style="width: 100%"
          />
        </el-col>
      </el-form-item>
      <el-form-item label="项目描述">
        <el-input v-model="formData.form.desc" type="textarea" />
      </el-form-item>


      <el-form-item label="访问控制">
        <el-radio-group v-model="formData.form.acl">
          <el-radio label='private' >私有 (只有项目负责人、团队成员和干系人可访问)</el-radio>
          <el-radio label='open' >公开 (有项目视图权限即可访问)</el-radio>
        </el-radio-group>
      </el-form-item>


      <el-form-item label="权限控制">
        <el-radio-group v-model="formData.form.auth">
          <el-radio label='extend' >继承 (取系统权限与项目权限的合集)</el-radio>
          <el-radio label='redefine' >重新定义 (只取项目权限)</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="cancelForm" >关闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>


</template>

<script setup>
  import { computed, ref,onMounted ,reactive,defineProps,defineEmits} from 'vue'
  import {ProjectGetById,ProjectSaveOrUpdate,ProjectSetSelect ,ProductSelect} from '@/api/project'
  import { ElMessage } from 'element-plus';
  import {userSelect} from '@/api/user'

  let props = defineProps({
    infoDialogData:{                            // 父组件v-model绑定的值
      type:Object,
    },
    infoDialog:{
      type: Boolean,
    },
    isUpdate:{
      type: Boolean,
    }
  });

  const formData = reactive({
    setOptions:[],
    produstOptions:[],
    userOptions:[],
    form:{}
  })

  const initData=()=>{
    formData.form=props.infoDialogData;
    ProjectSetSelect().then(res=>{
      if(res.code==200){
        formData.setOptions=res.data;
        ProductSelect(formData.form).then(resd=>{
          if(resd.code==200){
            formData.produstOptions=resd.data;
          }
        })
      }
    })
    userSelect().then(res=>{
      if(res.code==200){
        formData.userOptions=res.data;
      }
    })
  }


  //提交项目集
  const onSubmit = () => {
    ProjectSaveOrUpdate(formData.form).then(res=>{
      if(res.code==200){
        ElMessage.success("数据配置成功!");
        emits('renovate');
        cancelForm();
      }
    })
  }

  // 2、定义发射给父组件的方法
  const emits = defineEmits(['update:infoDialog','renovate'])

  const cancelForm=()=>{
    emits('update:infoDialog',false);
  }





</script>
